<template>
  <div>

  </div>
</template>
<script setup lang="ts">
//类型别名
// 字符串类型别名
// type TMyType=string
// let myVar:TMyType="hi web2420"
// console.log(myVar)

// 数字类型别名
// type MyNumber = number;
// let count: MyNumber = 42;


// 联合类型别名
// type TValue = string | number
// let value: TValue;
// value = "Hello";  // 正确
// value = 42;
// console.log(value)


//交叉类型
// type TPerson = {
//   name: string;
//   age: number;
// }
// type TEmployee = {
//   employeeId: string;
//   department: string;
// }
//
// type EmployeePerson = TPerson & TEmployee;
// let emp: EmployeePerson = {
//   name: "John Doe",
//   age: 30,
//   employeeId: "E12345",
//   department: "Engineering"
// }
// console.log(emp)



//对象类型别名
// type User = {
//   id: string;
//   name: string;
//   age?: number;
// }
// let user: User = {
//   id: "u1",
//   name: "Alice",
//   age: 25
// };
// console.log(user)


//函数类型别名
// type TAdd = (a: number, b: number) => number;
// let add: TAdd = (a, b) => {
//   return a + b;
// };
// add(1,3)


//字面量类型别名
// type SuccessStatus = "success";
// let status: SuccessStatus = "success";
// status = "error";  // 错误：不能将类型“"error"”赋给类型“SuccessStatus”
// console.log(status)


//泛型别名
// type TStringList<T> = {
//   items: T[];
//   count: number;
// };
//
// let stringList:TStringList<string> = {
//   items: ["a", "b", "c"],
//   count: 3
// };
//
// let numberList:TStringList<number> = {
//   items: [1, 2, 3],
//   count: 3
// }

//嵌套类型别名
// type User = {
//   id: string;
//   name: string;
// };
// type TPayload = {
//   id: string;
//   title: string;
//   content: string;
//   author: User;
// };
// type TResponse<T> = {
//   status: number;
//   payload: T;
// }
//
// let response:TResponse<TPayload> = {
//   status: 200,
//   payload: {
//     id: "p1",
//     title: "TypeScript 类型系统",
//     content: "类型别名的强大功能",
//     author: {
//       id: "u1",
//       name: "Alice"
//     }
//   }
// };
// console.log(response)


</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
